const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");
const pxtoviewport = require("postcss-px-to-viewport");
const autoprefixer = require("autoprefixer");
const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  parallel: false,
  outputDir: "../dist",
  publicPath: process.env.NODE_ENV === "production" ? "/ts_wechatbill/" : "/",
  chainWebpack: (config) => {
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"));
    //set第一个参数：设置的别名，第二个参数：设置的路径
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap((options) => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: true
              })
            ]
          }),
          compilerOptions: {
            module: "es2015"
          }
        });
        return options;
      });
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer(),
          pxtoviewport({
            viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
            minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
            unitPrecision: 3 // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
          })
        ]
      }
    }
  },
  devServer: {
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      "/api": {
        target: "http://47.99.134.126:7008",
        ws: true,
        changeOrigin: true
      }
    }
  }
};
